<template>
<div class="margin"></div>
  <header class="home-header wrap" :class='{active:active}'>
    
     <div class="app-name"> <span class="name-title">嗨逛全球</span><br/> <span class="app-title2">微店管理系统</span></div>
    <router-link class="header-search" tag="span" to="./searchbefore">
      <!-- <i class="iconfont icon-search"></i> -->
      <!-- <van-icon name="search" /> -->
      <div class="search-title">
        <van-swipe style="height: 20px;" vertical :show-indicators=false autoplay=4200 duration=800 :touchable=false>
          <van-swipe-item>莫小仙</van-swipe-item>
          <van-swipe-item>梅克伦堡啤酒</van-swipe-item>
          <van-swipe-item>一百份什锦</van-swipe-item>
          <van-swipe-item>橙宝西柚汁</van-swipe-item>
        </van-swipe>
        
        
        </div>
    </router-link>
    <router-link class="login" tag="span" to="./login" v-if="!$store.state.userInfo.F_Account"
      >登录</router-link
    >
    <!-- <router-link class="login" tag="span" to="./user" v-else>
      <van-icon name="manager-o" />
    </router-link> -->
  </header>
</template>
<script>
import { reactive, toRefs, nextTick } from "vue";
export default {
  name: "top",
  setup() {
    const data = reactive({
      active: false,
      value: "",
    });
    nextTick(() => {
      document.getElementById("app").addEventListener("scroll", () => {
        const scrollTop = document.getElementById("app").scrollTop;
         data.active=Math.abs(Math.round(scrollTop)) < 300
            ? false
            : true
      });
    });

    return { ...toRefs(data) };
  },
};
</script>
<style lang="scss" scoped>
@import "@/common/style/mixin";
.margin{
  height: 5.5rem;
  }
.home-header {
  position: fixed;
  top:0;
  @include wh(100%, 5.5rem);
  @include fj();
  // line-height: 50px;
  padding: .5rem 1.5rem 0;
  @include boxSizing();
  font-size: 1rem;
  color: #fff;
  z-index: 10000;
  background: $green;
  transition: background 0.5s cubic-bezier(0.39, 0.58, 0.57, 1);
  .nbmenu2 {
    color: #fff;
  }
  &.active {
    background: #fff;
     color: $green;
    .nbmenu2 {
      color: $green;
    }
    .login {
      color: $green;
    }
  }
.app-name {
      padding: .2rem 1rem;
      font-size: 1.8rem;
      font-weight: bold;
      // border-right: 1px solid #666;
      .app-title2{
        font-size: 1.2rem;
      }
    }
  .header-search {
    display: flex;
    // @include wh(74%, 20px);
    line-height: 2rem;
    margin: 1rem;
    padding: .5rem 0;
    color: #232326;
    background: rgba(240,240,240,.7);
    border-radius: 2rem;
    flex-grow: 1;
    justify-content: center;
    .icon-search {
      padding: 0 1rem;
      font-size: 1.7rem;
    }
    .search-title {
      font-size: 1.2rem;
      color: #666;
      line-height: 2.1rem;
    }
  }
  .icon-iconyonghu {
    color: #fff;
    font-size: 2.2rem;
  }
  .login {
    color: #fff;
    line-height: 5.2rem;
    .van-icon-manager-o {
      font-size: 2rem;
      vertical-align: -.3rem;
    }
  }
 
}
</style>
